{% extends 'base.html' %}
{% block styles %}
    {{ super() }}
    <!-- layui样式 -->
    <link rel="stylesheet" href="{{ url_for('static',filename='layui/css/layui.css') }}">
{% endblock %}

{% block title %}登记管理{% endblock title %}
{% block content %}
    <div class="content-wrapper">
        <section class="content-header">
            <h1>
                登记管理
                <small>登记管理</small>
            </h1>
        </section>
        <section class="content">
            <div class="box">
                <div class="box-header">
                    <div class="row">
                        <div class="col-md-4">
                            <div class="layui-inline">
                                <label>日期范围</label>
                                <div class="layui-input-inline">
                                    <input type="text" class="layui-input" id="date">
                                </div>
                                <button id="add" class="btn btn-success">增加</button>
                                <button id="delete" class="btn btn-danger">删除</button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="box-body">
                    <table id="demo" lay-filter="test"></table>
                </div>
            </div>
        </section>
    </div>
{% endblock %}

{% block scripts %}
    {{ super() }}
    <script src="{{ url_for('static',filename='laydate/laydate.js') }}"></script>
    <script src="{{ url_for('static',filename='layui/layui.all.js') }}"></script>
    <script>
        var table = layui.table;
        //方法级渲染
        table.render({
            elem: '#demo', //指定原始表格元素选择器（推荐id选择器）
            id: 'lzh', //设定容器唯
            height: 700, //设定容器高度
            skin: 'row', //列边框风格
            even: true, //开启隔行背景
            page: true, //开启分页
            limit: 25,
            limits: [10, 25, 50, 100],
            data: [{'id': 1, 'user': 'lzh', text: '借了100W', time: '..'}],
            //标题栏
            cols: [[
                {checkbox: true},
                {field: 'id', title: 'ID', width: 150},
                {field: 'user', title: '用户', sort: true, width: 200},
                {field: 'text', title: '备注', sort: true, width: 500},
                {field: 'time', title: '时间', width: 300},
            ]],
        });

        laydate.render({
            elem: '#date',
            range: true,
            done: function (value, date, endDate) {
                //转换日期字符串
                function format_date(Object) {
                    if (typeof(Object.year) == 'undefined') {
                        return undefined
                    }
                    else {
                        var date = String(Object.year) + String(Object.month) + String(Object.date)
                        return date
                    }
                }

                var STR_date = format_date(date)
                var End_date = format_date(endDate)
                table.reload('lzh')
                console.log(STR_date, End_date)
            }
        });

    </script>
{% endblock %}